<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevVault - 个人组件库与知识库</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js用于仪表盘图表 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2eaadc',
                        secondary: '#1f2328',
                        neutral: {
                            50: '#f9fafb',
                            100: '#f3f4f6',
                            200: '#e5e7eb',
                            300: '#d1d5db',
                            400: '#9ca3af',
                            500: '#6b7280',
                            600: '#4b5563',
                            700: '#374151',
                            800: '#1f2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        mono: ['Consolas', 'Monaco', 'monospace'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow-sm {
                text-shadow: 0 1px 2px rgba(0,0,0,0.1);
            }
            .card-hover {
                @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1;
            }
            .nav-active {
                @apply text-primary font-medium border-l-4 border-primary pl-3 -ml-4;
            }
        }
    </style>
</head>
<body class="bg-neutral-50 text-neutral-800 font-sans">
    <!-- 顶部导航栏 (一级导航) -->
    <header class="bg-white border-b border-neutral-200 sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo和导航链接 -->
                <div class="flex items-center space-x-4">
                    <a href="#" class="flex items-center space-x-2 text-neutral-900 font-bold">
                        <i class="fa fa-cube text-primary text-xl"></i>
                        <span>DevVault</span>
                    </a>
                    
                    <nav class="hidden md:flex space-x-1">
                        <button class="primary-nav-link px-4 py-5 text-primary font-medium border-b-2 border-primary" data-nav="dashboard">仪表盘</button>
                        <button class="primary-nav-link px-4 py-5 text-neutral-600 font-medium hover:text-primary transition-colors" data-nav="components">组件库</button>
                        <button class="primary-nav-link px-4 py-5 text-neutral-600 font-medium hover:text-primary transition-colors" data-nav="knowledge">知识库</button>
                        <button class="primary-nav-link px-4 py-5 text-neutral-600 font-medium hover:text-primary transition-colors" data-nav="favorites">收藏</button>
                    </nav>
                </div>
                
                <!-- 搜索框 -->
                <div class="hidden md:block flex-1 max-w-md mx-8">
                    <div class="relative">
                        <input type="text" placeholder="搜索组件、文档或标签..." 
                               class="w-full bg-neutral-100 border border-neutral-200 rounded-md py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
                    </div>
                </div>
                
                <!-- 用户区域 -->
                <div class="flex items-center space-x-4">
                    <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors relative">
                        <i class="fa fa-bell-o text-neutral-600"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                    </button>
                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border border-neutral-200">
                        <span class="hidden md:inline text-sm font-medium">devuser</span>
                        <i class="fa fa-chevron-down text-xs text-neutral-500"></i>
                    </div>
                    <button class="md:hidden p-2 rounded-md hover:bg-neutral-100 transition-colors" id="mobileMenuBtn">
                        <i class="fa fa-bars text-neutral-600"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端搜索框 -->
        <div class="md:hidden px-4 pb-3">
            <div class="relative">
                <input type="text" placeholder="搜索组件、文档或标签..." 
                       class="w-full bg-neutral-100 border border-neutral-200 rounded-md py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
            </div>
        </div>
        
        <!-- 移动端一级导航菜单 -->
        <div class="md:hidden bg-white border-t border-neutral-200">
            <div class="flex overflow-x-auto scrollbar-hide">
                <button class="mobile-primary-nav-link flex-shrink-0 px-4 py-3 text-primary font-medium border-b-2 border-primary" data-nav="dashboard">仪表盘</button>
                <button class="mobile-primary-nav-link flex-shrink-0 px-4 py-3 text-neutral-600 font-medium hover:text-primary transition-colors" data-nav="components">组件库</button>
                <button class="mobile-primary-nav-link flex-shrink-0 px-4 py-3 text-neutral-600 font-medium hover:text-primary transition-colors" data-nav="knowledge">知识库</button>
                <button class="mobile-primary-nav-link flex-shrink-0 px-4 py-3 text-neutral-600 font-medium hover:text-primary transition-colors" data-nav="favorites">收藏</button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <div class="flex flex-col md:flex-row gap-6">
            <!-- 侧边栏 (二级导航) -->
            <aside class="md:w-64 lg:w-72 shrink-0">
                <!-- 仪表盘二级导航 -->
                <div class="secondary-nav" id="dashboard-nav">
                    <div class="sticky top-20 bg-white rounded-lg border border-neutral-200 overflow-hidden">
                        <div class="p-4 border-b border-neutral-200">
                            <h3 class="font-semibold text-neutral-900 mb-3">仪表盘</h3>
                            <ul class="space-y-1">
                                <li>
                                    <a href="#" class="flex items-center px-3 py-2 rounded-md text-primary bg-primary/10">
                                        <i class="fa fa-tachometer w-5 mr-3"></i>
                                        <span>总览</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <i class="fa fa-line-chart w-5 mr-3"></i>
                                        <span>统计分析</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <i class="fa fa-history w-5 mr-3"></i>
                                        <span>活动记录</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <i class="fa fa-bell w-5 mr-3"></i>
                                        <span>通知提醒</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        
                        <!-- 存储空间 -->
                        <div class="p-4 border-b border-neutral-200">
                            <h3 class="font-semibold text-neutral-900 mb-3">存储空间</h3>
                            <div class="mb-2">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-neutral-600">已使用</span>
                                    <span class="font-medium">4.2 GB / 10 GB</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 42%"></div>
                                </div>
                            </div>
                            <button class="w-full py-2 text-sm text-primary border border-primary rounded-md hover:bg-primary/5 transition-colors">
                                升级存储空间
                            </button>
                        </div>
                        
                        <!-- 最近活动 -->
                        <div class="p-4">
                            <h3 class="font-semibold text-neutral-900 mb-3">最近活动</h3>
                            <ul class="space-y-3">
                                <li class="flex">
                                    <div class="flex-shrink-0 mt-0.5">
                                        <div class="w-2 h-2 rounded-full bg-green-500"></div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-neutral-800">添加了新组件 <span class="text-primary">通知提示组件</span></p>
                                        <p class="text-xs text-neutral-500 mt-0.5">今天 14:32</p>
                                    </div>
                                </li>
                                <li class="flex">
                                    <div class="flex-shrink-0 mt-0.5">
                                        <div class="w-2 h-2 rounded-full bg-blue-500"></div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-neutral-800">更新了文档 <span class="text-primary">组件设计规范</span></p>
                                        <p class="text-xs text-neutral-500 mt-0.5">昨天 09:15</p>
                                    </div>
                                </li>
                                <li class="flex">
                                    <div class="flex-shrink-0 mt-0.5">
                                        <div class="w-2 h-2 rounded-full bg-purple-500"></div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-neutral-800">收藏了文档 <span class="text-primary">状态管理指南</span></p>
                                        <p class="text-xs text-neutral-500 mt-0.5">2天前</p>
                                    </div>
                                </li>
                                <li class="flex">
                                    <div class="flex-shrink-0 mt-0.5">
                                        <div class="w-2 h-2 rounded-full bg-amber-500"></div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-neutral-800">上传了3个组件到组件库</p>
                                        <p class="text-xs text-neutral-500 mt-0.5">3天前</p>
                                    </div>
                                </li>
                            </ul>
                            <a href="#" class="text-xs text-primary hover:text-primary/80 mt-3 inline-block">查看全部活动</a>
                        </div>
                    </div>
                </div>
                
                <!-- 组件库二级导航 -->
                <div class="secondary-nav hidden" id="components-nav">
                    <div class="sticky top-20 bg-white rounded-lg border border-neutral-200 overflow-hidden">
                        <div class="p-4 border-b border-neutral-200">
                            <h3 class="font-semibold text-neutral-900 mb-3">组件库</h3>
                            <ul class="space-y-1">
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md bg-primary/10 text-primary">
                                        <span class="flex items-center">
                                            <i class="fa fa-th-large w-5 mr-3"></i>
                                            全部组件
                                        </span>
                                        <span class="bg-primary/20 text-primary text-xs px-2 py-0.5 rounded-full">42</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-desktop w-5 mr-3"></i>
                                            布局组件
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">12</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-input w-5 mr-3"></i>
                                            表单组件
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">8</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-bars w-5 mr-3"></i>
                                            导航组件
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">6</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-area-chart w-5 mr-3"></i>
                                            数据可视化
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">5</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-modal-window w-5 mr-3"></i>
                                            反馈组件
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">11</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        
                        <!-- 组件标签 -->
                        <div class="p-4">
                            <h3 class="font-semibold text-neutral-900 mb-3">组件标签</h3>
                            <div class="flex flex-wrap gap-2">
                                <a href="#" class="px-3 py-1 bg-neutral-100 text-neutral-700 text-sm rounded-full hover:bg-neutral-200 transition-colors">#React</a>
                                <a href="#" class="px-3 py-1 bg-neutral-100 text-neutral-700 text-sm rounded-full hover:bg-neutral-200 transition-colors">#Vue</a>
                                <a href="#" class="px-3 py-1 bg-neutral-100 text-neutral-700 text-sm rounded-full hover:bg-neutral-200 transition-colors">#TypeScript</a>
                                <a href="#" class="px-3 py-1 bg-neutral-100 text-neutral-700 text-sm rounded-full hover:bg-neutral-200 transition-colors">#Tailwind</a>
                                <a href="#" class="px-3 py-1 bg-neutral-100 text-neutral-700 text-sm rounded-full hover:bg-neutral-200 transition-colors">#JavaScript</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 知识库二级导航 -->
                <div class="secondary-nav hidden" id="knowledge-nav">
                    <div class="sticky top-20 bg-white rounded-lg border border-neutral-200 overflow-hidden">
                        <div class="p-4 border-b border-neutral-200">
                            <h3 class="font-semibold text-neutral-900 mb-3">知识库</h3>
                            <ul class="space-y-1">
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md bg-primary/10 text-primary">
                                        <span class="flex items-center">
                                            <i class="fa fa-book w-5 mr-3"></i>
                                            全部文档
                                        </span>
                                        <span class="bg-primary/20 text-primary text-xs px-2 py-0.5 rounded-full">28</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-paint-brush w-5 mr-3"></i>
                                            设计指南
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">7</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-code w-5 mr-3"></i>
                                            开发指南
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-file-text-o w-5 mr-3"></i>
                                            API文档
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">4</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-cogs w-5 mr-3"></i>
                                            运维文档
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">3</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-tasks w-5 mr-3"></i>
                                            项目计划
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">3</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        
                        <!-- 最近更新的文档 -->
                        <div class="p-4">
                            <h3 class="font-semibold text-neutral-900 mb-3">最近更新</h3>
                            <ul class="space-y-3">
                                <li>
                                    <a href="#" class="group">
                                        <p class="text-sm font-medium text-neutral-800 group-hover:text-primary transition-colors">组件设计规范</p>
                                        <p class="text-xs text-neutral-500 mt-1">昨天 09:15</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="group">
                                        <p class="text-sm font-medium text-neutral-800 group-hover:text-primary transition-colors">API调用最佳实践</p>
                                        <p class="text-xs text-neutral-500 mt-1">1周前</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="group">
                                        <p class="text-sm font-medium text-neutral-800 group-hover:text-primary transition-colors">状态管理指南</p>
                                        <p class="text-xs text-neutral-500 mt-1">2周前</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 收藏二级导航 -->
                <div class="secondary-nav hidden" id="favorites-nav">
                    <div class="sticky top-20 bg-white rounded-lg border border-neutral-200 overflow-hidden">
                        <div class="p-4 border-b border-neutral-200">
                            <h3 class="font-semibold text-neutral-900 mb-3">我的收藏</h3>
                            <ul class="space-y-1">
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md bg-primary/10 text-primary">
                                        <span class="flex items-center">
                                            <i class="fa fa-star w-5 mr-3"></i>
                                            全部收藏
                                        </span>
                                        <span class="bg-primary/20 text-primary text-xs px-2 py-0.5 rounded-full">15</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-cubes w-5 mr-3"></i>
                                            组件收藏
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">2</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <span class="flex items-center">
                                            <i class="fa fa-file-text w-5 mr-3"></i>
                                            文档收藏
                                        </span>
                                        <span class="bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">13</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <i class="fa fa-tags w-5 mr-3"></i>
                                        <span>收藏标签</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center px-3 py-2 rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <i class="fa fa-sort-amount-desc w-5 mr-3"></i>
                                        <span>排序方式</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        
                        <!-- 收藏统计 -->
                        <div class="p-4 border-b border-neutral-200 bg-neutral-50">
                            <h3 class="font-semibold text-neutral-900 mb-3">收藏统计</h3>
                            <div class="space-y-3">
                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span class="text-neutral-600">组件占比</span>
                                        <span class="font-medium">13%</span>
                                    </div>
                                    <div class="w-full bg-neutral-200 rounded-full h-2">
                                        <div class="bg-blue-500 h-2 rounded-full" style="width: 13%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span class="text-neutral-600">文档占比</span>
                                        <span class="font-medium">87%</span>
                                    </div>
                                    <div class="w-full bg-neutral-200 rounded-full h-2">
                                        <div class="bg-green-500 h-2 rounded-full" style="width: 87%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 最近添加的收藏 -->
                        <div class="p-4">
                            <h3 class="font-semibold text-neutral-900 mb-3">最近添加</h3>
                            <ul class="space-y-3">
                                <li class="flex items-center">
                                    <img src="https://picsum.photos/id/169/100/100" alt="通知提示组件" class="w-8 h-8 rounded object-cover mr-2">
                                    <span class="text-sm">通知提示组件</span>
                                </li>
                                <li class="flex items-center">
                                    <div class="w-8 h-8 rounded bg-blue-100 flex items-center justify-center text-blue-600 mr-2">
                                        <i class="fa fa-file-text-o text-xs"></i>
                                    </div>
                                    <span class="text-sm">组件设计规范</span>
                                </li>
                                <li class="flex items-center">
                                    <div class="w-8 h-8 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-2">
                                        <i class="fa fa-file-text text-xs"></i>
                                    </div>
                                    <span class="text-sm">状态管理指南</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </aside>
            
            <!-- 页面内容区域 -->
            <div class="flex-1">
                <!-- 仪表盘页面 -->
                <div class="page-content" id="dashboard-page">
                    <!-- 页面标题和操作区 -->
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4">
                        <div>
                            <h1 class="text-2xl font-bold text-neutral-900">仪表盘</h1>
                            <p class="text-neutral-500 mt-1">概览你的组件库和知识库</p>
                        </div>
                        <div class="flex space-x-3">
                            <button class="flex items-center space-x-1 px-4 py-2 bg-primary text-white rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">
                                <i class="fa fa-plus"></i>
                                <span>新建项目</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 统计卡片 -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                        <div class="bg-white rounded-lg border border-neutral-200 p-5 card-hover">
                            <div class="flex items-start justify-between">
                                <div>
                                    <p class="text-neutral-500 text-sm">组件总数</p>
                                    <h3 class="text-3xl font-bold text-neutral-900 mt-1">42</h3>
                                    <p class="text-green-600 text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i>
                                        <span>较上月增长 12%</span>
                                    </p>
                                </div>
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa fa-cubes"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg border border-neutral-200 p-5 card-hover">
                            <div class="flex items-start justify-between">
                                <div>
                                    <p class="text-neutral-500 text-sm">文档总数</p>
                                    <h3 class="text-3xl font-bold text-neutral-900 mt-1">28</h3>
                                    <p class="text-green-600 text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i>
                                        <span>较上月增长 8%</span>
                                    </p>
                                </div>
                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg border border-neutral-200 p-5 card-hover">
                            <div class="flex items-start justify-between">
                                <div>
                                    <p class="text-neutral-500 text-sm">收藏项目</p>
                                    <h3 class="text-3xl font-bold text-neutral-900 mt-1">15</h3>
                                    <p class="text-green-600 text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i>
                                        <span>较上月增长 5%</span>
                                    </p>
                                </div>
                                <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg border border-neutral-200 p-5 card-hover">
                            <div class="flex items-start justify-between">
                                <div>
                                    <p class="text-neutral-500 text-sm">本月访问</p>
                                    <h3 class="text-3xl font-bold text-neutral-900 mt-1">124</h3>
                                    <p class="text-red-600 text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-down mr-1"></i>
                                        <span>较上月下降 3%</span>
                                    </p>
                                </div>
                                <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                                    <i class="fa fa-eye"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 图表和最近项目 -->
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                        <!-- 活跃度图表 -->
                        <div class="lg:col-span-2 bg-white rounded-lg border border-neutral-200 p-5 card-hover">
                            <div class="flex justify-between items-center mb-6">
                                <h3 class="font-semibold text-neutral-900">项目活跃度</h3>
                                <div class="flex space-x-2">
                                    <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-md">月度</button>
                                    <button class="px-3 py-1 text-xs bg-neutral-100 text-neutral-600 rounded-md hover:bg-neutral-200 transition-colors">季度</button>
                                    <button class="px-3 py-1 text-xs bg-neutral-100 text-neutral-600 rounded-md hover:bg-neutral-200 transition-colors">年度</button>
                                </div>
                            </div>
                            <div class="h-64">
                                <canvas id="activityChart"></canvas>
                            </div>
                        </div>
                        
                        <!-- 组件分类分布 -->
                        <div class="bg-white rounded-lg border border-neutral-200 p-5 card-hover">
                            <h3 class="font-semibold text-neutral-900 mb-6">组件分类分布</h3>
                            <div class="h-64">
                                <canvas id="categoryChart"></canvas>
                            </div>
                            <div class="mt-4 space-y-2">
                                <div class="flex items-center justify-between text-sm">
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-primary mr-2"></span>
                                        <span>布局组件</span>
                                    </div>
                                    <span class="font-medium">12</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-blue-500 mr-2"></span>
                                        <span>表单组件</span>
                                    </div>
                                    <span class="font-medium">8</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
                                        <span>导航组件</span>
                                    </div>
                                    <span class="font-medium">6</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></span>
                                        <span>数据可视化</span>
                                    </div>
                                    <span class="font-medium">5</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-purple-500 mr-2"></span>
                                        <span>反馈组件</span>
                                    </div>
                                    <span class="font-medium">11</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 最近更新的组件和文档 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- 最近更新的组件 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="p-5 border-b border-neutral-200">
                                <div class="flex justify-between items-center">
                                    <h3 class="font-semibold text-neutral-900">最近更新的组件</h3>
                                    <a href="#" class="text-sm text-primary hover:text-primary/80">查看全部</a>
                                </div>
                            </div>
                            <div class="divide-y divide-neutral-200">
                                <div class="p-4 hover:bg-neutral-50 transition-colors">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/169/100/100" alt="通知提示组件" class="w-10 h-10 rounded object-cover mr-3">
                                        <div class="flex-1">
                                            <h4 class="font-medium text-neutral-900">通知提示组件</h4>
                                            <p class="text-xs text-neutral-500">TypeScript · 反馈组件</p>
                                        </div>
                                        <span class="text-xs text-neutral-500 whitespace-nowrap">今天 14:32</span>
                                    </div>
                                </div>
                                <div class="p-4 hover:bg-neutral-50 transition-colors">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/201/100/100" alt="表单组件集" class="w-10 h-10 rounded object-cover mr-3">
                                        <div class="flex-1">
                                            <h4 class="font-medium text-neutral-900">表单组件集</h4>
                                            <p class="text-xs text-neutral-500">TypeScript · 表单组件</p>
                                        </div>
                                        <span class="text-xs text-neutral-500 whitespace-nowrap">2天前</span>
                                    </div>
                                </div>
                                <div class="p-4 hover:bg-neutral-50 transition-colors">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/0/100/100" alt="响应式导航栏" class="w-10 h-10 rounded object-cover mr-3">
                                        <div class="flex-1">
                                            <h4 class="font-medium text-neutral-900">响应式导航栏</h4>
                                            <p class="text-xs text-neutral-500">React · 导航组件</p>
                                        </div>
                                        <span class="text-xs text-neutral-500 whitespace-nowrap">3天前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 最近更新的文档 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="p-5 border-b border-neutral-200">
                                <div class="flex justify-between items-center">
                                    <h3 class="font-semibold text-neutral-900">最近更新的文档</h3>
                                    <a href="#" class="text-sm text-primary hover:text-primary/80">查看全部</a>
                                </div>
                            </div>
                            <div class="divide-y divide-neutral-200">
                                <div class="p-4 hover:bg-neutral-50 transition-colors">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                                            <i class="fa fa-file-text-o"></i>
                                        </div>
                                        <div class="flex-1">
                                            <h4 class="font-medium text-neutral-900">组件设计规范</h4>
                                            <p class="text-xs text-neutral-500">设计指南 · 2.4k 字</p>
                                        </div>
                                        <span class="text-xs text-neutral-500 whitespace-nowrap">昨天 09:15</span>
                                    </div>
                                </div>
                                <div class="p-4 hover:bg-neutral-50 transition-colors">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded bg-green-100 flex items-center justify-center text-green-600 mr-3">
                                            <i class="fa fa-file-code-o"></i>
                                        </div>
                                        <div class="flex-1">
                                            <h4 class="font-medium text-neutral-900">API调用最佳实践</h4>
                                            <p class="text-xs text-neutral-500">开发指南 · 1.8k 字</p>
                                        </div>
                                        <span class="text-xs text-neutral-500 whitespace-nowrap">1周前</span>
                                    </div>
                                </div>
                                <div class="p-4 hover:bg-neutral-50 transition-colors">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                                            <i class="fa fa-file-text"></i>
                                        </div>
                                        <div class="flex-1">
                                            <h4 class="font-medium text-neutral-900">状态管理指南</h4>
                                            <p class="text-xs text-neutral-500">开发指南 · 3.2k 字</p>
                                        </div>
                                        <span class="text-xs text-neutral-500 whitespace-nowrap">2周前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 知识库页面 -->
                <div class="page-content hidden" id="knowledge-page">
                    <!-- 页面标题和操作区 -->
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4">
                        <div>
                            <h1 class="text-2xl font-bold text-neutral-900">知识库</h1>
                            <p class="text-neutral-500 mt-1">管理和浏览你的文档集合</p>
                        </div>
                        <div class="flex space-x-3">
                            <div class="relative">
                                <button class="flex items-center space-x-1 px-4 py-2 border border-neutral-300 rounded-md text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors">
                                    <i class="fa fa-filter"></i>
                                    <span>筛选</span>
                                </button>
                            </div>
                            <div class="relative">
                                <button class="flex items-center space-x-1 px-4 py-2 border border-neutral-300 rounded-md text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors">
                                    <i class="fa fa-sort"></i>
                                    <span>排序</span>
                                    <i class="fa fa-chevron-down text-xs"></i>
                                </button>
                            </div>
                            <button class="flex items-center space-x-1 px-4 py-2 bg-primary text-white rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">
                                <i class="fa fa-plus"></i>
                                <span>新建文档</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 文档列表 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 文档卡片 1 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="p-5">
                                <div class="flex justify-between items-start mb-3">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                                            <i class="fa fa-file-text-o"></i>
                                        </div>
                                        <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">组件设计规范</h3>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-primary transition-colors" title="已收藏">
                                            <i class="fa fa-star"></i>
                                        </button>
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4 line-clamp-2">详细介绍了组件设计的原则、风格指南、交互模式和实现标准，确保团队开发的组件具有一致性。</p>
                                <div class="flex flex-wrap gap-2 mb-4">
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#设计指南</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#组件规范</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#UI/UX</span>
                                </div>
                                <div class="flex justify-between items-center text-xs text-neutral-500 pt-2 border-t border-neutral-100">
                                    <div class="flex items-center">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <span>2.4k 字</span>
                                    </div>
                                    <span>更新于 昨天 09:15</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 文档卡片 2 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="p-5">
                                <div class="flex justify-between items-start mb-3">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded bg-green-100 flex items-center justify-center text-green-600 mr-3">
                                            <i class="fa fa-file-code-o"></i>
                                        </div>
                                        <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">API调用最佳实践</h3>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="收藏">
                                            <i class="fa fa-star-o"></i>
                                        </button>
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4 line-clamp-2">介绍了API调用的最佳实践，包括错误处理、请求缓存、身份验证、速率限制和性能优化等方面的内容。</p>
                                <div class="flex flex-wrap gap-2 mb-4">
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#开发指南</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#API</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#最佳实践</span>
                                </div>
                                <div class="flex justify-between items-center text-xs text-neutral-500 pt-2 border-t border-neutral-100">
                                    <div class="flex items-center">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <span>1.8k 字</span>
                                    </div>
                                    <span>更新于 1周前</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 文档卡片 3 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="p-5">
                                <div class="flex justify-between items-start mb-3">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                                            <i class="fa fa-file-text"></i>
                                        </div>
                                        <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">状态管理指南</h3>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-primary transition-colors" title="已收藏">
                                            <i class="fa fa-star"></i>
                                        </button>
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4 line-clamp-2">详细讲解了前端应用中的状态管理策略，包括本地状态、全局状态、服务端状态的管理方式和适用场景。</p>
                                <div class="flex flex-wrap gap-2 mb-4">
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#开发指南</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#状态管理</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#React</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#Vue</span>
                                </div>
                                <div class="flex justify-between items-center text-xs text-neutral-500 pt-2 border-t border-neutral-100">
                                    <div class="flex items-center">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <span>3.2k 字</span>
                                    </div>
                                    <span>更新于 2周前</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 文档卡片 4 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="p-5">
                                <div class="flex justify-between items-start mb-3">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3">
                                            <i class="fa fa-file-pdf-o"></i>
                                        </div>
                                        <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">项目部署流程</h3>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="收藏">
                                            <i class="fa fa-star-o"></i>
                                        </button>
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4 line-clamp-2">描述了项目从开发环境到生产环境的完整部署流程，包括构建、测试、打包、发布和监控等环节。</p>
                                <div class="flex flex-wrap gap-2 mb-4">
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#运维文档</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#部署</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#CI/CD</span>
                                </div>
                                <div class="flex justify-between items-center text-xs text-neutral-500 pt-2 border-t border-neutral-100">
                                    <div class="flex items-center">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <span>1.5k 字</span>
                                    </div>
                                    <span>更新于 3周前</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="mt-10 flex justify-center">
                        <div class="inline-flex rounded-md shadow-sm">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                <i class="fa fa-chevron-left text-xs"></i>
                            </a>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-primary text-sm font-medium text-white">
                                1
                            </a>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                2
                            </a>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                3
                            </a>
                            <span class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700">
                                ...
                            </span>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                5
                            </a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                <i class="fa fa-chevron-right text-xs"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 收藏页面 -->
                <div class="page-content hidden" id="favorites-page">
                    <!-- 页面标题和操作区 -->
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4">
                        <div>
                            <h1 class="text-2xl font-bold text-neutral-900">我的收藏</h1>
                            <p class="text-neutral-500 mt-1">浏览和管理你收藏的组件和文档</p>
                        </div>
                        <div class="flex space-x-3">
                            <div class="relative">
                                <button class="flex items-center space-x-1 px-4 py-2 border border-neutral-300 rounded-md text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors">
                                    <i class="fa fa-filter"></i>
                                    <span>筛选</span>
                                </button>
                            </div>
                            <div class="relative">
                                <button class="flex items-center space-x-1 px-4 py-2 border border-neutral-300 rounded-md text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors">
                                    <i class="fa fa-sort"></i>
                                    <span>排序</span>
                                    <i class="fa fa-chevron-down text-xs"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 收藏的组件 -->
                    <div class="mb-10">
                        <h2 class="text-xl font-semibold text-neutral-900 mb-4">收藏的组件</h2>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                            <!-- 收藏的组件 1 -->
                            <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                                <div class="h-40 bg-neutral-100 relative">
                                    <img src="https://picsum.photos/id/180/600/400" alt="数据表格组件预览" class="w-full h-full object-cover">
                                    <div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
                                        Vue
                                    </div>
                                </div>
                                <div class="p-4">
                                    <div class="flex justify-between items-start mb-2">
                                        <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">高级数据表格</h3>
                                        <div class="flex space-x-1">
                                            <button class="p-1.5 rounded hover:bg-neutral-100 text-primary transition-colors" title="已收藏">
                                                <i class="fa fa-star"></i>
                                            </button>
                                            <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <p class="text-sm text-neutral-600 mb-3 line-clamp-2">支持排序、筛选、分页和行操作的高级数据表格组件。</p>
                                    <div class="flex flex-wrap gap-2 mb-3">
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#数据</span>
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#表格</span>
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#Vue</span>
                                    </div>
                                    <div class="flex justify-between items-center text-xs text-neutral-500">
                                        <span>更新于 1周前</span>
                                        <span>
                                            <i class="fa fa-download mr-1"></i>94
                                        </span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 收藏的组件 2 -->
                            <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                                <div class="h-40 bg-neutral-100 relative">
                                    <img src="https://picsum.photos/id/160/600/400" alt="图表组件预览" class="w-full h-full object-cover">
                                    <div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
                                        React
                                    </div>
                                </div>
                                <div class="p-4">
                                    <div class="flex justify-between items-start mb-2">
                                        <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">数据可视化图表</h3>
                                        <div class="flex space-x-1">
                                            <button class="p-1.5 rounded hover:bg-neutral-100 text-primary transition-colors" title="已收藏">
                                                <i class="fa fa-star"></i>
                                            </button>
                                            <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <p class="text-sm text-neutral-600 mb-3 line-clamp-2">包含折线图、柱状图、饼图等多种图表类型的数据可视化组件。</p>
                                    <div class="flex flex-wrap gap-2 mb-3">
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#图表</span>
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#数据可视化</span>
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#React</span>
                                    </div>
                                    <div class="flex justify-between items-center text-xs text-neutral-500">
                                        <span>更新于 5天前</span>
                                        <span>
                                            <i class="fa fa-download mr-1"></i>156
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 收藏的文档 -->
                    <div>
                        <h2 class="text-xl font-semibold text-neutral-900 mb-4">收藏的文档</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 收藏的文档 1 -->
                            <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                                <div class="p-5">
                                    <div class="flex justify-between items-start mb-3">
                                        <div class="flex items-center">
                                            <div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                                                <i class="fa fa-file-text-o"></i>
                                            </div>
                                            <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">组件设计规范</h3>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button class="p-1.5 rounded hover:bg-neutral-100 text-primary transition-colors" title="已收藏">
                                                <i class="fa fa-star"></i>
                                            </button>
                                            <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <p class="text-sm text-neutral-600 mb-4 line-clamp-2">详细介绍了组件设计的原则、风格指南、交互模式和实现标准，确保团队开发的组件具有一致性。</p>
                                    <div class="flex flex-wrap gap-2 mb-4">
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#设计指南</span>
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#组件规范</span>
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#UI/UX</span>
                                    </div>
                                    <div class="flex justify-between items-center text-xs text-neutral-500 pt-2 border-t border-neutral-100">
                                        <div class="flex items-center">
                                            <i class="fa fa-clock-o mr-1"></i>
                                            <span>2.4k 字</span>
                                        </div>
                                        <span>更新于 昨天 09:15</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 收藏的文档 2 -->
                            <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                                <div class="p-5">
                                    <div class="flex justify-between items-start mb-3">
                                        <div class="flex items-center">
                                            <div class="w-10 h-10 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                                                <i class="fa fa-file-text"></i>
                                            </div>
                                            <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">状态管理指南</h3>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button class="p-1.5 rounded hover:bg-neutral-100 text-primary transition-colors" title="已收藏">
                                                <i class="fa fa-star"></i>
                                            </button>
                                            <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <p class="text-sm text-neutral-600 mb-4 line-clamp-2">详细讲解了前端应用中的状态管理策略，包括本地状态、全局状态、服务端状态的管理方式和适用场景。</p>
                                    <div class="flex flex-wrap gap-2 mb-4">
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#开发指南</span>
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#状态管理</span>
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#React</span>
                                        <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#Vue</span>
                                    </div>
                                    <div class="flex justify-between items-center text-xs text-neutral-500 pt-2 border-t border-neutral-100">
                                        <div class="flex items-center">
                                            <i class="fa fa-clock-o mr-1"></i>
                                            <span>3.2k 字</span>
                                        </div>
                                        <span>更新于 2周前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 组件库页面 -->
                <div class="page-content hidden" id="components-page">
                    <!-- 页面标题和操作区 -->
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4">
                        <div>
                            <h1 class="text-2xl font-bold text-neutral-900">个人组件库</h1>
                            <p class="text-neutral-500 mt-1">管理和浏览你的组件集合</p>
                        </div>
                        <div class="flex space-x-3">
                            <div class="relative">
                                <button class="flex items-center space-x-1 px-4 py-2 border border-neutral-300 rounded-md text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors">
                                    <i class="fa fa-filter"></i>
                                    <span>筛选</span>
                                </button>
                            </div>
                            <div class="relative">
                                <button class="flex items-center space-x-1 px-4 py-2 border border-neutral-300 rounded-md text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors">
                                    <i class="fa fa-sort"></i>
                                    <span>排序</span>
                                    <i class="fa fa-chevron-down text-xs"></i>
                                </button>
                            </div>
                            <button class="flex items-center space-x-1 px-4 py-2 bg-primary text-white rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">
                                <i class="fa fa-plus"></i>
                                <span>添加组件</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 视图切换 -->
                    <div class="flex items-center space-x-2 mb-6 p-1 bg-white rounded-md border border-neutral-200 w-fit">
                        <button class="px-3 py-1.5 rounded bg-primary/10 text-primary text-sm font-medium">
                            <i class="fa fa-th-large mr-1"></i>卡片视图
                        </button>
                        <button class="px-3 py-1.5 rounded text-neutral-600 text-sm font-medium hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-list mr-1"></i>列表视图
                        </button>
                    </div>
                    
                    <!-- 组件卡片网格 -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 组件卡片 1 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="h-40 bg-neutral-100 relative">
                                <img src="https://picsum.photos/id/0/600/400" alt="响应式导航栏组件预览" class="w-full h-full object-cover">
                                <div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
                                    React
                                </div>
                            </div>
                            <div class="p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">响应式导航栏</h3>
                                    <div class="flex space-x-1">
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="收藏">
                                            <i class="fa fa-star-o"></i>
                                        </button>
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-3 line-clamp-2">自适应各种屏幕尺寸的导航栏组件，包含下拉菜单和移动端适配。</p>
                                <div class="flex flex-wrap gap-2 mb-3">
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#导航</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#响应式</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#React</span>
                                </div>
                                <div class="flex justify-between items-center text-xs text-neutral-500">
                                    <span>更新于 3天前</span>
                                    <span>
                                        <i class="fa fa-download mr-1"></i>128
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 组件卡片 2 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="h-40 bg-neutral-100 relative">
                                <img src="https://picsum.photos/id/180/600/400" alt="数据表格组件预览" class="w-full h-full object-cover">
                                <div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
                                    Vue
                                </div>
                            </div>
                            <div class="p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">高级数据表格</h3>
                                    <div class="flex space-x-1">
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-primary transition-colors" title="已收藏">
                                            <i class="fa fa-star"></i>
                                        </button>
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-3 line-clamp-2">支持排序、筛选、分页和行操作的高级数据表格组件。</p>
                                <div class="flex flex-wrap gap-2 mb-3">
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#数据</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#表格</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#Vue</span>
                                </div>
                                <div class="flex justify-between items-center text-xs text-neutral-500">
                                    <span>更新于 1周前</span>
                                    <span>
                                        <i class="fa fa-download mr-1"></i>94
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 组件卡片 3 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="h-40 bg-neutral-100 relative">
                                <img src="https://picsum.photos/id/201/600/400" alt="表单组件集预览" class="w-full h-full object-cover">
                                <div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
                                    TS
                                </div>
                            </div>
                            <div class="p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">表单组件集</h3>
                                    <div class="flex space-x-1">
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="收藏">
                                            <i class="fa fa-star-o"></i>
                                        </button>
                                        <button class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors" title="更多选项">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-3 line-clamp-2">包含输入框、选择器、复选框等的完整表单组件集合，带验证功能。</p>
                                <div class="flex flex-wrap gap-2 mb-3">
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#表单</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#验证</span>
                                    <span class="px-2 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#TypeScript</span>
                                </div>
                                <div class="flex justify-between items-center text-xs text-neutral-500">
                                    <span>更新于 2天前</span>
                                    <span>
                                        <i class="fa fa-download mr-1"></i>215
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="mt-10 flex justify-center">
                        <div class="inline-flex rounded-md shadow-sm">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                <i class="fa fa-chevron-left text-xs"></i>
                            </a>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-primary text-sm font-medium text-white">
                                1
                            </a>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                2
                            </a>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                3
                            </a>
                            <span class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700">
                                ...
                            </span>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                8
                            </a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                <i class="fa fa-chevron-right text-xs"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-neutral-200 mt-12">
        <div class="container mx-auto px-4 py-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-cube text-primary text-xl mr-2"></i>
                    <span class="font-bold text-neutral-900">DevVault</span>
                    <span class="text-neutral-500 ml-4 text-sm">© 2023 DevVault. 保留所有权利。</span>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-github text-lg"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-twitter text-lg"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-linkedin text-lg"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('mobileMenuBtn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 页面和二级导航切换功能
        function showPageAndNav(pageId, navId) {
            // 隐藏所有页面
            document.querySelectorAll('.page-content').forEach(page => {
                page.classList.add('hidden');
            });
            
            // 显示选中页面
            document.getElementById(pageId).classList.remove('hidden');
            
            // 隐藏所有二级导航
            document.querySelectorAll('.secondary-nav').forEach(nav => {
                nav.classList.add('hidden');
            });
            
            // 显示对应的二级导航
            document.getElementById(navId).classList.remove('hidden');
            
            // 更新顶部导航状态
            document.querySelectorAll('.primary-nav-link, .mobile-primary-nav-link').forEach(link => {
                link.classList.remove('text-primary', 'border-b-2', 'border-primary');
                link.classList.add('text-neutral-600');
            });
            
            document.querySelectorAll(`[data-nav="${navId.replace('-nav', '')}"]`).forEach(link => {
                link.classList.remove('text-neutral-600');
                link.classList.add('text-primary', 'border-b-2', 'border-primary');
            });
        }
        
        // 绑定顶部导航事件
        document.querySelectorAll('.primary-nav-link, .mobile-primary-nav-link').forEach(link => {
            link.addEventListener('click', function() {
                const nav = this.getAttribute('data-nav');
                showPageAndNav(`${nav}-page`, `${nav}-nav`);
            });
        });
        
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 活跃度图表
            const activityCtx = document.getElementById('activityChart').getContext('2d');
            new Chart(activityCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [
                        {
                            label: '组件更新',
                            data: [12, 19, 15, 20, 18, 25],
                            borderColor: '#2eaadc',
                            backgroundColor: 'rgba(46, 170, 220, 0.1)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '文档更新',
                            data: [8, 15, 10, 14, 16, 12],
                            borderColor: '#34d399',
                            backgroundColor: 'rgba(52, 211, 153, 0.1)',
                            tension: 0.3,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            
            // 分类分布图表
            const categoryCtx = document.getElementById('categoryChart').getContext('2d');
            new Chart(categoryCtx, {
                type: 'doughnut',
                data: {
                    labels: ['布局组件', '表单组件', '导航组件', '数据可视化', '反馈组件'],
                    datasets: [{
                        data: [12, 8, 6, 5, 11],
                        backgroundColor: [
                            '#2eaadc',
                            '#3b82f6',
                            '#10b981',
                            '#f59e0b',
                            '#8b5cf6'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
            
            // 模拟卡片加载动画
            const cards = document.querySelectorAll('.card-hover');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, 100 * index);
            });
        });
    </script>
</body>
</html>
    